{% extends "layout.html" %}

{% block main %}
<div class="d-flex mt-3">
    <span>当前位置：</span>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{base_url}}/">首页</a></li>
            <li class="breadcrumb-item active"><a href="{{base_url}}/search.html">搜索</a></li>
        </ol>
    </nav>
</div>
<ul class="list-group list-group-flush" id="mainlist">

</ul>
<script src="{{base_url}}/static/cache/search.js"></script>
<script>
    let keyword = new URLSearchParams(location.search).get('s') ?? '';
    document.querySelector('.breadcrumb .active').innerText = keyword;
    showList(keyword);
    function showList(keyWord) {
        if (!keyWord) {
            return;
        }
        let keyword0 = keyWord.toLowerCase(), keyword1 = keyWord.toUpperCase(), html = '', pattern = new RegExp(keyword, 'ig');
        let data = getData().filter(function (v) {
            return v.title.toLowerCase().includes(keyword0);
        }).forEach(item => {
            item.title = item.title.replace(pattern, `<span class="hightlight-keyword">$&</span>`);
            html += `<li class="list-group-item d-flex justify-content-between">
                <a href="${item.url}">${item.title}</a>
                <a href="${item.url}" class="text-secondary">${item.created_at}</a>
            </li>`;
        });
        document.querySelector('#mainlist').innerHTML = html;
    }
</script>
{% endblock %}